<template>
  <view class="tab">
    <view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
      <image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
      <view class="tab_text" :class="{'tab_text_active': currentIndex == index}">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
import icon_1 from './img/icon-1.png'
import icon_2 from './img/icon-2.png'
import icon_3 from './img/icon-3.png'
import icon_4 from './img/icon-4.png'
import icon_5 from './img/icon-5.png'
import icon_1_active from './img/icon-1-active.png'
import icon_2_active from './img/icon-2-active.png'
import icon_3_active from './img/icon-3-active.png'
import icon_4_active from './img/icon-4-active.png'
import icon_5_active from './img/icon-5-active.png'
export default {
  name:"tabbar",
  props: {
    tabIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    // 监听tabIndex变化并更新currentIndex
    tabIndex: {
      handler(newVal) {
        this.currentIndex = newVal;
        console.log(newVal)
      },
      immediate: true
    }
  },
  data() {
    return {
      studentMenu: [
        {
          text: "实验",
          iconPath: icon_1,
          selectedIconPath: icon_1_active,
          path: "/pages/index/index"
        },
        {
          text: "作业",
          iconPath: icon_2,
          selectedIconPath: icon_2_active,
          path: "/pages/work/work"
        },
        {
          text: "AI助手",
          iconPath: icon_3,
          selectedIconPath: icon_3_active,
          path: "/pages/ai/ai"
        },{
          text: "百科",
          iconPath: icon_4,
          selectedIconPath: icon_4_active,
          path: "/pages/wiki/wiki"
        },
        {
          text: "我的",
          iconPath: icon_5,
          selectedIconPath: icon_5_active,
          path: "/pages/my/my"
        }
      ],
      techerMenu: [
       {
          text: "实验",
          iconPath: icon_1,
          selectedIconPath: icon_1_active,
          path: "/pages/teacher/index/index"
        },
        {
          text: "作业",
          iconPath: icon_2,
          selectedIconPath: icon_2_active,
          path: "/pages/teacher/job/index",
        },
        {
          text: "AI助手",
          iconPath: icon_3,
          selectedIconPath: icon_3_active,
          path: "/pages/ai/ai"
        },{
          text: "百科",
          iconPath: icon_4,
          selectedIconPath: icon_4_active,
          path: "/pages/teacher/wiki/wiki"
        },
        {
          text: "我的",
          iconPath: icon_5,
          selectedIconPath: icon_5_active,
          path: "/pages/teacher/my/my"
        } 
      ],
      list: [],
      currentIndex: 0
    };
  },
  methods: {
    getInfo() {
      // let deviceInfo = uni.getSystemInfoSync()
      // console.log(deviceInfo)
      let myProfile = uni.getStorageSync('myProfile')
      if (myProfile.user_type_id === 4) {
        this.list = this.studentMenu
      } else {
        this.list = this.techerMenu
      }
    },
    switchTab(item, index) {
      this.currentIndex = index;
      // this.$emit('switchTab', item, index);
      uni.switchTab({
        url: item.path
      })
    }
  },
  activated() {
    this.currentIndex = this.tabIndex;
    console.log('tabbar activated, currentIndex:', this.currentIndex)
  },
  // 添加deactivated钩子
  deactivated() {
    console.log('tabbar deactivated')
  },
  beforeMount() {
    uni.hideTabBar({
      animation:false
    })
    this.getInfo();
  },
}
</script>

<style lang="less">
.tab {
  height: calc(126rpx + env(safe-area-inset-bottom));
  width: 100%;
  padding: 0 30rpx;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
}
.tab-item {
  width: 100rpx;
  height: 126rpx;
  padding: 16rpx 20rpx 10rpx 20rpx;
  .tab_img {
    width: 60rpx;
    height: 60rpx;
  }
  .tab_text {
    margin-top: 8rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    text-align: center;
    color: #8c8c8c;
    font-weight: 400;
    font-family: PingFangSC, PingFang SC;
    &.tab_text_active {
      color: #2776FF;
    }
  }
}
</style>